<script setup>
import { ref, computed, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue';

const props = defineProps({
    images: {
        type: Array,
        required: true
    },
    currentIndex: {
        type: Number,
        required: true
    },
});

const emit = defineEmits(['view-details', 'update-index']);

const currentIndex = ref(props.currentIndex);
const intervalId = ref(null);

const handleViewDetails = () => {
    emit('view-details');
};

const prevImage = () => {
    let newIndex = currentIndex.value - 1;
    if (newIndex < 0) {
        newIndex = props.images.length - 1;
    }
    currentIndex.value = newIndex;
    emit('update-index', newIndex);
};

const nextImage = () => {
    let newIndex = (currentIndex.value + 1) % props.images.length;
    currentIndex.value = newIndex;
    emit('update-index', newIndex);
};

const startBackgroundRotation = () => {
    intervalId.value = setInterval(nextImage, 3000);
};

const stopBackgroundRotation = () => {
    clearInterval(intervalId.value);
};

const imageUrl = computed(() => {
    return props.images[currentIndex.value];
});

onMounted(() => {
    startBackgroundRotation();
});

onBeforeUnmount(() => {
    stopBackgroundRotation();
});
</script>

<template>
    <div class="carousel">
        <img :src="imageUrl" alt="Carousel Image" class="carousel-image" />
        <button @click="prevImage" class="carousel-button prev">Previous</button>
        <button @click="nextImage" class="carousel-button next">Next</button>
        <button @click="handleViewDetails" class="carousel-button details">View Details</button>
    </div>
</template>

<style scoped>
.carousel-container {
    position: relative;
    width: 100vw;
    /* 充满视口宽度 */
    height: 100vh;
    /* 充满视口高度 */
    overflow: hidden;
    /* 隐藏超出部分 */
}

.carousel-image {
    width: 100%;
    /* 图片宽度充满容器 */
    height: 100%;
    /* 图片高度充满容器 */
    object-fit: cover;
    /* 按比例缩放，覆盖整个容器 */
    object-position: center;
    /* 图片居中显示 */
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    /* 黑色背景，70% 透明度 */
    color: white;
    border: none;
    padding: 12px 24px;
    /* 调整按钮内边距 */
    cursor: pointer;
    z-index: 10;
    border-radius: 25px;
    /* 圆角 */
    font-size: 16px;
    /* 文字大小 */
    font-weight: bold;
    /* 加粗文字 */
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* 添加过渡效果 */
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.9);
    /* 鼠标悬停时背景更黑 */
    transform: translateY(-50%) scale(1.05);
    /* 悬停时轻微放大 */
}

.carousel-button.prev {
    left: 20px;
}

.carousel-button.next {
    right: 20px;
}

.carousel-button.details {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 25px;
    height: 48px;
    /* 设置固定高度 */
    padding: 0 24px;
    /* 去除上下内边距，保持高度 */
    line-height: 48px;
    /* 设置行高与按钮高度相同，使文本居中 */
}
</style>